/**
 * @description 获取统计数据列表
 */

import React, { FC, useEffect, useRef, useState } from "react";
//引入获取统计列表数据
import { getStatData } from "../../../service";
import { useRequest, useEventListener } from "ahooks";
import { useParams } from "react-router-dom";
import useGetComponentInfo_redux from "../../../hooks/useGetComponentInfo_redux";
import useGetPageInfo_redux from "../../../hooks/useGetPageInfo_redux";
import { Typography, Spin, Table, Pagination, ConfigProvider } from "antd";
import zh_CN from "antd/es/locale/zh_CN";
import classNames from "classnames/bind";
import style from "./index.module.scss";
const CBN = classNames.bind(style);
const { Title } = Typography;
type propsType = {
  selectedId: string;
  setselectedId: (id: string) => void;
  selectedType: string;
  setselectedType: (id: string) => void;
  setselectedProps: (props: any) => void;
};

const StatTable: FC<propsType> = (props) => {
  const { title } = useGetPageInfo_redux();
  const { selectedId, setselectedId, setselectedType, setselectedProps } = props;
  const { id = "" } = useParams();
  const [total, settotal] = useState(0);
  const [list, setlist] = useState([]);
  const [Page, setPage] = useState(0);
  const [PageSize, setPageSize] = useState(10);
  const { componentList } = useGetComponentInfo_redux();
  const { loading, data: dataSource } = useRequest(
    async () => {
      const res = await getStatData(id, { Page, PageSize });
      return res;
    },
    {
      onSuccess: (res) => {
        console.log(res);
        setRowIndex(0);
        settotal(res.total);
        setlist(res.list);
        setselectedProps(res.list[0]);
      },
      refreshDeps: [Page, PageSize],
    },
  );

  const columns = componentList.map((item) => {
    const title = item.props.title || item.title;
    const dataIndex = item.fe_id;
    return {
      title: (
        <div
          onClick={() => {
            setselectedId(item.fe_id);
            setselectedType(item.type);
          }}
          className={CBN("tablehead")}
          style={{ color: selectedId == item.fe_id ? "#5995e9" : "inherit" }}
        >
          {title}
        </div>
      ),
      dataIndex,
    };
  });
  const tablecontainer = useRef<HTMLDivElement>(null);
  const [tableheight, settableheight] = useState(0);

  useEventListener(
    "resize",
    () => {
      if (tablecontainer) {
        const height = tablecontainer.current?.clientHeight;
        if (!height) return;
        settableheight(height);
      }
    },
    { target: window },
  );
  useEffect(() => {
    if (tablecontainer) {
      const height = tablecontainer.current?.clientHeight;
      if (!height) return;
      settableheight(height);
    }
  }, []);
  //选择挑选的行数据
  const [rowIndex, setRowIndex] = useState(0);

  return (
    <div className={CBN("StatTable")}>
      <Title>{title}</Title>
      <div className={CBN("tablecontainer")} ref={tablecontainer}>
        <Table
          onRow={(record, index) => {
            return {
              onClick: (event) => {
                setRowIndex(index!);
                setselectedProps(record);
              }, // 点击行
            };
          }}
          rowClassName={(_, index) => {
            return index == rowIndex ? "rowBgColor" : "";
          }}
          loading={loading}
          pagination={false}
          columns={columns}
          dataSource={list.map((item: any) => {
            return { ...item, key: item!._id };
          })}
          scroll={{ y: tableheight - 55 }}
        ></Table>
      </div>

      <div className={CBN("pagecontainer")}>
        <ConfigProvider locale={zh_CN}>
          <Pagination
            total={total}
            onChange={(page) => {
              setPage(page);
            }}
            current={Page}
            onShowSizeChange={(page, pagesize) => {
              setPage(page);
              setPageSize(pagesize);
            }}
          />
        </ConfigProvider>
      </div>
    </div>
  );
};

export default StatTable;
